<template>
  <view class="content">
    <view class="input">
      <uni-search-bar style="height: 24px; font-size: 14px" v-model.trim="parameter.Article_Name" @blur="rake"
        @clear="rake">
      </uni-search-bar>
    </view>
    <view class="nav">
      <view v-for="(item, index) in category" @click="SwitchVariety(item, index)" :key="index"
        :class="{ active: activeIndex === index }" style="cursor: pointer">{{ item }}</view>
    </view>
    <view class="cont">
      <view class="item" v-for="(row, index) in tableData" :key="index">
        <view class="name">商品信息 : {{ row.Article_Name }}</view>
        <view class="title">
          <view><text class="tou">所属企业 : </text>{{ row.Enterprise_Name }}</view>
          <view><text>商品价格 : </text><text class="text-danger">￥{{ row.Amount }}</text>
          </view>
          <view><text>交易数量 : </text>
            <text class="text-danger">×{{ row.Quantity }}{{ row.Unit }}</text>
          </view>
          <view><text>付款方式 : </text>{{ row.Trading_Name }}</view>
          <view class="">
            <text>交易状态 : </text>
            <view class="pand">
              <text v-if="row.Row_Status == '0' && row.Seller_Status == '0'">待对方审核</text>
              <text v-if="row.Row_Status == '2' && row.Seller_Status == '0'">对方拒绝您的申请</text>
              <text v-if="row.Row_Status == '1' && row.Seller_Status == '0'">待双方确认合同</text>
              <text v-if="row.Row_Status == '4' && row.Seller_Status == '0'">待我方确认合同</text>
              <text v-if="row.Row_Status == '1' && row.Seller_Status == '4'">待对方确认合同</text>
              <view v-if="row.Trading_Name != '全款'" class="">
                <text v-if="row.Row_Status == '4' &&
                  row.Trading_Detail_SerialNumber.includes(
                    'T01000000000001_0'
                  ) &&
                  row.Seller_Status == '4'
                  ">待对方付首款</text>
                <text v-if="row.Row_Status == '5' &&
                  row.Trading_Detail_SerialNumber.includes(
                    'T01000000000001_0'
                  ) &&
                  row.Seller_Status == '4'
                  ">待对方付首款</text>
                <text v-if="row.Row_Status == '5' &&
                  row.Trading_Detail_SerialNumber.includes(
                    'T01000000000002_0'
                  ) &&
                  row.Trading_Detail_SerialNumber.includes(
                    'T01000000000001_1'
                  )
                  ">待对方付下一笔款</text>
                <text v-if="row.Row_Status == '4' &&
                  row.Trading_Detail_SerialNumber.includes(
                    'T01000000000003_0'
                  ) &&
                  row.Trading_Detail_SerialNumber.includes(
                    'T01000000000002_1'
                  )
                  ">待对方付下一笔款</text>
                <text v-if="row.Row_Status == '6' &&
                  row.Trading_Detail_SerialNumber.includes(
                    'T01000000000004_0'
                  ) &&
                  row.Trading_Detail_SerialNumber.includes(
                    'T01000000000003_1'
                  )
                  ">待对方付尾款</text>
                <text v-if="row.Row_Status == '4' &&
                  row.Seller_Status == '4' &&
                  row.Trading_Detail_SerialNumber.includes(
                    'T01000000000001_1'
                  )
                  ">待我方发货</text>
              </view>
              <view v-if="row.Trading_Name == '全款'">
                <text v-if="row.Seller_Status == '4' &&
                  row.Row_Status == '4' &&
                  row.Trading_Detail_SerialNumber.includes(
                    'T01000000000001_0'
                  )
                  ">待对方付全款</text>
                <text v-if="row.Seller_Status == '4' &&
                  row.Row_Status == '4' &&
                  row.Trading_Detail_SerialNumber.includes(
                    'T01000000000001_1'
                  )
                  ">待我方发货</text>
                <text v-if="row.Seller_Status == '4' &&
                  row.Row_Status == '4' &&
                  row.Trading_Detail_SerialNumber.includes(
                    'T01000000000002_0'
                  )
                  ">待对方付全款</text>
                <text v-if="row.Seller_Status == '4' &&
                  row.Row_Status == '4' &&
                  row.Trading_Detail_SerialNumber.includes(
                    'T01000000000002_1'
                  )
                  ">待我方发货</text>
                <text v-if="row.Seller_Status == '4' &&
                  row.Row_Status == '4' &&
                  row.Trading_Detail_SerialNumber.includes(
                    'T01000000000003_0'
                  )
                  ">待对方付全款</text>
                <text v-if="row.Seller_Status == '4' &&
                  row.Row_Status == '4' &&
                  row.Trading_Detail_SerialNumber.includes(
                    'T01000000000003_1'
                  )
                  ">待我方发货</text>
                <text v-if="row.Seller_Status == '4' &&
                  row.Row_Status == '4' &&
                  row.Trading_Detail_SerialNumber.includes(
                    'T01000000000004_0'
                  )
                  ">待对方付全款</text>
                <text v-if="row.Seller_Status == '4' && row.Row_Status == '5'">待对方收货</text>
              </view>
              <text v-if="row.Row_Status == '6' &&
                row.Seller_Status == '4' &&
                Number(row.Amount) * Number(row.Quantity) ==
                Number(row.Collection_Amount)
                ">交易结束</text>
            </view>
          </view>
          <view><text>应付金额 : </text>
            <text class="text-danger">￥{{
              (Number(row.Amount) * Number(row.Quantity)).toFixed(2)
            }}</text>
          </view>
          <view><text>已付金额 : </text>
            <text class="text-danger">￥{{ Number(row.Collection_Amount).toFixed(2) }}</text>
          </view>
          <view><text>未付金额 : </text>
            <text class="text-danger">￥{{
              (
                Number(row.Amount) * Number(row.Quantity) -
                Number(row.Collection_Amount)
              ).toFixed(2)
            }}</text>
          </view>
        </view>
      </view>
    </view>

    <view class="text-center py-2">
      <text>{{ BottomFont }}</text>
      <uni-icons v-if="BottomFont == '加载中...'" type="spinner-cycle"></uni-icons>
    </view>
    <view v-if="tag" @click="goTop" class="bg-white flex align-center justify-center" style="
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.5);
        position: fixed;
        bottom: 150rpx;
        right: 50rpx;
      ">
      <image style="width: 80%; height: 80%" src="https://digital.essc.top/dist/zjl_icon/gotop.png" mode=""></image>
    </view>
  </view>
</template>

<script>
import { getGroupSeekTransactionAllAction } from "@/api/purchasedgoods.js";
const app = getApp();
export default {
  data() {
    return {
      loading: false,
      total: 0,
      tableData: [],
      parameter: {
        Type: "0",
        Article_Name: "",
        Row_Status: "",
        Group_Seek_Purchase_SerialNumber: "",
        Enterprise_Info_SerialNumber: uni.getStorageSync("enterprise"),
        page: 1, //页数
        limit: 5, //每页数据条数
      },
      activeIndex: 0,
      category: [
        //用户专区分类筛选
        "全部",
        "待审核",
        "待付款",
        "待收货",
        "交易成功",
      ],
      group_seek_transaction: {},
      group_seek_transaction_logistics: {
        Group_Seek_Logistics_SerialNumber: "", //主键
        Group_Seek_Transaction_SerialNumber: "", //交易流水号
        Transport_Type: "", //运输方式
        Transport_Explain: "", //说明
      },
      selectedIndex: 0,
      BottomFont: "下拉获取更多",
      num: 0,
      tag: false,
    };
  },
  onLoad(options) {
    console.log(Number(options.index));
    let index = Number(options.index);
    if (index == 0) {
      this.parameter.Row_Status = "";
      this.activeIndex = 0;

    } else if (index == 1) {
      this.parameter.Row_Status = "0";
      this.activeIndex = 1;

    } else if (index == 3) {
      this.parameter.Row_Status = "5";
      this.activeIndex = 3;

    } else if (index == 2) {
      this.parameter.Row_Status = "6";
      this.activeIndex = 2;

    } else if (index == 4) {
      this.parameter.Row_Status = "6";
      this.activeIndex = 4;
    }
    // console.log(this.activeIndex);
    this.purchasedGoods(this.parameter);
  },
  onReachBottom() {
    this.tag = true;
    //触底事件
    if (this.num != this.total) {
      //如果未超过所有数则调用请求
      this.parameter.page++;
      this.purchasedGoods(this.parameter);
    } else {
      //反之改变底部字体
      this.BottomFont = "已经到底了";
    }
  },
  methods: {
    rake() {
      this.tableData = [];
      this.purchasedGoods(this.parameter);
    },
    async SwitchVariety(i, index) {
      this.parameter.Row_Status = index;
      if (index == 0) {
        this.parameter.Row_Status = "";
      } else if (index == 1) {
        this.parameter.Row_Status = 0;
      } else if (index == 2) {
        this.parameter.Row_Status = 4;
      } else if (index == 3) {
        this.parameter.Row_Status = 4;
      } else {
        this.parameter.Row_Status = 6;
      }
      this.goTop();
      this.num = 0;
      this.parameter.page = 1;
      this.purchasedGoods(this.parameter);
      this.tableData = [];
      this.activeIndex = index;
    },
    async purchasedGoods(data) {
      uni.showLoading({
        title: "加载中...",
      });
      this.BottomFont = "加载中...";
      const res = await getGroupSeekTransactionAllAction({
        data,
      });
      if (res.redirect && res.redirect == "REDIRECT") {
        uni.navigateTo({
          url: "/pages/login/login?expire=1",
        });
      } else if (res.Status == "success") {
        this.tableData.push(...res.tableData);
        this.total = Number(res.limit);
        uni.hideLoading();
        this.num = this.tableData.length;
        if (this.num == this.total) {
          this.BottomFont = "已经到底了";
        } else {
          this.BottomFont = "下拉加载更多";
        }
      }
    },
    goTop() {
      uni.pageScrollTo({
        scrollTop: 0,
      });
      this.tag = false;
    },
  },
};
</script>

<style lang="scss">
.content {
  background-color: #f5f5f5;
  // height: calc(100vh);
  width: 100%;

  .nav {
    height: 88rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;

    // font-weight: bold;
    view {
      text-align: center;
      height: 100%;
      display: flex;
      align-items: center;
      font-size: 30rpx;
      padding: 10rpx;
      box-sizing: border-box;
    }

    .active {
      border-bottom: 3px solid #28a745;
      font-size: 30rpx;
    }
  }

  .cont {
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;

    .item {
      border-radius: 20rpx;
      background-color: #fff;
      padding: 20rpx;
      box-sizing: border-box;
      margin: 0 0 30rpx 0;

      .name {
        padding: 0 0 20rpx 0;
        border-bottom: 1px solid #f5f5f5;
        font-weight: bold;
      }

      .title {
        display: flex;
        justify-content: space-between;
        margin: 0 0 20rpx 0;
        flex-direction: column;
        padding: 20rpx;
        box-sizing: border-box;

        view {
          display: flex;
          margin: 20rpx 0;
          justify-content: space-between;
          align-items: center;

          .tou {
            display: inline-block;
            width: 45%;
          }
        }

        .pand {
          display: flex;
        }
      }
    }
  }

  .input {
    // height: 40rpx;
    border-radius: 20rpx;
    background-color: #fff;
    // padding: 20rpx;
    box-sizing: border-box;
    // margin: 0 0 30rpx 0;
  }
}</style>
